<template>
	<el-card>
		<el-form :inline="true" :model="formData.queryForm" label-position="top" @keyup.enter="getDataList">
			<el-form-item label="打包状态">
				<el-select v-model="formData.queryForm.collectState" remote filterable clearable placeholder="请选择">
					<el-option v-for="item in collectStateOptions" :key="item.value" :label="item.label" :value="item.value" @click="getData(item)" />
				</el-select>
			</el-form-item>
			<!-- 业务 -->
			<el-form-item label="业务">
				<el-select v-model="formData.queryForm.businessState" remote filterable clearable placeholder="请选择">
					<el-option v-for="item in businessOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<!-- 出货状态 -->
			<el-form-item label="出货状态">
				<el-select v-model="formData.queryForm.shState" filterable remote clearable placeholder="请选择">
					<el-option v-for="item in sellOption" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<!-- 货状态 -->
			<el-form-item label="货物状态">
				<el-select v-model="formData.queryForm.goodsState" filterable remote clearable placeholder="请选择">
					<el-option v-for="item in cargoOption" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="操作">
				<el-select v-model="formData.queryForm.operateId" filterable remote clearable placeholder="请选择" @change="findUserData">
					<el-option v-for="item in opOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="客户">
				<el-select v-model="formData.queryForm.customId" filterable remote clearable placeholder="请选择">
					<el-option v-for="item in customIdOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="业务员">
				<el-select v-model="formData.queryForm.saId" filterable remote clearable placeholder="请选择">
					<el-option v-for="item in saleOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="客服">
				<el-select v-model="formData.queryForm.businessId" filterable remote clearable placeholder="请选择">
					<el-option v-for="item in customerOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<!-- 订单号 -->
			<el-form-item label="订单号/提单号/mainifest">
				<el-input v-model="formData.queryForm.ordersNo" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<!-- 收据单号 -->
			<el-form-item label="请输入收据单号">
				<el-input v-model="formData.queryForm.collectNo" placeholder="请输入" clearable type="textarea" :rows="1"></el-input>
			</el-form-item>
			<!-- 箱号 -->
			<el-form-item label="箱号">
				<el-input v-model="formData.queryForm.boxNo" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="快递单号">
				<el-input v-model="formData.queryForm.expressNo" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="发货人">
				<el-input v-model="formData.queryForm.sendor" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="收货人">
				<el-input v-model="formData.queryForm.collector" placeholder="请输入" clearable></el-input>
			</el-form-item>
			<el-form-item label="计费重类型">
				<el-select v-model="formData.queryForm.chargeState" remote filterable clearable placeholder="请选择">
					<el-option v-for="item in chargedStateOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="始发国家">
				<el-select v-model="formData.queryForm.originCountry" remote filterable clearable placeholder="请输入">
					<el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="目的地国家">
				<el-select v-model="formData.queryForm.destinationCountry" remote filterable clearable placeholder="请输入">
					<el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="收货日期">
				<!-- <el-date-picker
					v-model="start1"
					type="datetimerange"
					start-placeholder="请选择"
					end-placeholder="请选择"
					format="YYYY-MM-DD HH:mm:ss"
					date-format="YYYY/MM/DD ddd"
					time-format="hh:mm:ss"
				/> -->
				<el-date-picker
					v-model="start1"
					type="datetimerange"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					format="YYYY-MM-DD HH:mm:ss"
					date-format="YYYY/MM/DD ddd"
					time-format="hh:mm:ss"
				/>
			</el-form-item>
			<el-form-item label="货物类型">
				<el-select v-model="formData.queryForm.collectType" remote filterable clearable placeholder="请选择">
					<el-option v-for="item in collectTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>

			<div style="display: flex; flex-wrap: wrap; align-items: flex-end">
				<el-form-item>
					<el-button @click="getDataList">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="addHandle()">新增</el-button>
				</el-form-item>
			</div>
		</el-form>

		<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="dictType" label="序号" header-align="center" align="center">
				<template #default="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="collectNo" label="收据单号" header-align="center" align="center" width="180"> </el-table-column>
			<!-- <el-table-column prop="ordersNo" label="订单号/提单号/mainifest" header-align="center" align="center"></el-table-column> -->
			<el-table-column prop="expressNo" label="快递单号" sortable="custom" header-align="center" align="center" width="180"> </el-table-column>
			<el-table-column prop="goodsState" label="货物状态" sortable="custom" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<el-tag v-if="row.goodsState && row.goodsState === 0" type="danger" size="large">未收货</el-tag>
					<el-tag v-else-if="row.goodsState && row.goodsState === 1" type="primary" size="large">已收货</el-tag>
					<el-tag v-else-if="row.goodsState && row.goodsState === 5" type="primary" size="large">已出仓</el-tag>
					<el-tag v-else type="warning" size="large">已到达</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="collectState" label="打包状态" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<el-tag v-if="row.collectState == 1" size="large" type="info">未打包</el-tag>
					<el-tag v-else-if="row.collectState == 2" size="large" type="success">已打包</el-tag>
					<el-tag v-else size="large">部分打包</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="originCountry" label="始发地国家" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<div>
						{{ row.originCountry }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="destinationCountry" label="目的地国家" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<div>
						{{ row.destinationCountry }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="businessState" label="业务类型" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<el-tag v-if="row.businessState === '海运'" type="primary" size="large">{{ row.businessState }}</el-tag>
					<el-tag v-else-if="row.businessState === '陆运'" type="success" size="large">{{ row.businessState }}</el-tag>
					<el-tag v-else-if="row.businessState === '空运'" type="danger" size="large">{{ row.businessState }}</el-tag>
					<el-tag v-else type="info" size="large">{{ row.businessState }}</el-tag>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="sendor" label="发货人" header-align="center" align="center" width="180"></el-table-column> -->
			<el-table-column prop="collector" label="收货人" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column prop="collectNum" label="收货件数" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column prop="weight" label="重量" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column prop="chargedWeight" label="计费重量" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column prop="custom" label="客户" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<span>{{ row.custom }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="sales" label="业务员" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<span>{{ row.sales }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="business" label="客服" header-align="center" align="center" width="180">
				<template #default="{ row }">
					<span>{{ row.business }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="collectTime" label="收货日期" header-align="center" align="center" width="180"></el-table-column>


			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="170">
				<template #default="{ row }">
					<el-button type="primary" link @click="checkHandle(row)">查看</el-button>
					<el-button type="primary" link @click="addOrUpdateHandle(row)">修改</el-button>
					<el-dropdown :hide-on-click="false" class="drop-down">
						<span class="el-dropdown-link">
							更多
							<el-icon class="el-icon--right">
								<ArrowDown />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<!-- <el-dropdown-item>
									<el-button type="info" link @click="showDictDataHandle(row)">物流追踪</el-button>
								</el-dropdown-item> -->
								<!-- <el-dropdown-item>
									<el-button type="warning" link>打印收据</el-button>
								</el-dropdown-item> -->
								<el-dropdown-item>
									<el-button type="primary" link @click="printCollectExpress(row)">打印小标签</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="formData.currentPage"
			:page-sizes="pageSizes"
			:page-size="formData.pageSize"
			:total="formData.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<!-- 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRefs" :isUpdate="isUpdate.valueOf()" @close="handleCloseFreight" @refreshDataList="getDataList"></add-or-update>
		<!-- 字典配置 -->

		<viewDetail ref="viewDetailRefs" @close="handleCloseFreight" />
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { ComponentPublicInstance, getCurrentInstance, onActivated, reactive, ref, onMounted, computed } from 'vue'
// import AddOrUpdate from './type-add-or-update.vue'
// import DictData from './data.vue'
import { collectExpressApi, getIdApi, collectSelectOne, getExpressRelatedData } from '@/api/freight'
import { fetchWarning, myError } from '@/store/modules/common'
import { freightData, ElSelectOption } from '../../../components/type/general'
import { ArrowDown } from '@element-plus/icons-vue'
import { getDataDictionary, useDictTypeAllApi } from '@/api/dict'
import viewDetail from './viewDetail.vue'
import addOrUpdate from './addOrUpdate.vue'
import { IHooksOptions } from '@/hooks/interface'
import store from '@/store'
import { switchCase } from '@babel/types'
import { packOutWareHouseApi } from '@/api/pack'


const proxy = getCurrentInstance()?.proxy as ComponentPublicInstance

const isUpdate = ref<Boolean>(false);

const pageSizes = [1, 2, 5, 20, 50, 100]
const dataListLoading = ref(false)
const dataList = ref([])
const start1 = ref('')
const formData = reactive({
	queryForm: {
		id: 1,
		normal_piece: '',
		collectNo: '',
		ordersNo: '',
		expressNo: '',
		collectState: '',
		businessState: '',
		sendor: '',
		collector: '',
		custom: '',
		business: '',
		goodsHourse: '',
		collectTimeStart: '',
		collectTimeEnd: '',
		createTimeStart: '',
		createTimeEnd: '',
		shState: '',
		goodsState: '',
		origin: '',
		collectType: '',
		customId: '',
		businessId: '',
		chargeState: '',
		saName: '',
		operateId: '',
		saId: '',
		originCountry: '',
		destinationCountry: '',
		boxNo: ''
	},
	currentPage: 1,
	pageSize: 10,
	total: 0
})

const allDataOp = ref([])
const customIdOptions = ref<ElSelectOption[]>([])
const saleOptions = ref<ElSelectOption[]>([])
const customerOptions = ref<ElSelectOption[]>([])
const opOptions = ref<ElSelectOption[]>([])

const handleCloseFreight = (refresh: any) => {
	if (refresh) {
		getDataList()
	}
}
// 打包状态
const collectStateOptions = ref<ElSelectOption[]>([])
// 客户
const customerOption = ref<ElSelectOption[]>([])
const sellOption = [
	{
		label: '全部出货状态',
		value: ''
	},
	{
		label: '未出货',
		value: 1
	},
	{
		label: '已出货',
		value: 2
	}
]
const cargoOption = ref<ElSelectOption[]>([])

const collectTypeOptions = [
	{
		label: '普货',
		value: 1
	},
	{
		label: '敏感货',
		value: 2
	},
	{
		label: '单证普货',
		value: 3
	},
	{
		label: '单证敏感货',
		value: 4
	}
]
const chargedStateOptions = [
	{
		label: '重量',
		value: 1
	},
	{
		label: '万方',
		value: 2
	}
]
const sizeChangeHandle = (val: number) => {
	formData.pageSize = val
	getDataList()
}
const currentChangeHandle = (val: number) => {
	formData.currentPage = val
	getDataList()
}

// 获取操作客户等
async function getId() {
	try {
		const res = await getIdApi()

		if (fetchWarning(res)) {
			return
		}
		let data = res.data || []
		console.log('客户', data)
		customerOptions.value = data.list
	} catch (e) {
		myError(e)
	}
}
getId()
const findUserData = (val: string) => {
	customIdOptions.value = []
	saleOptions.value = []
	customerOptions.value = []
	formData.queryForm.customId = ''
	formData.queryForm.businessId = ''
	formData.queryForm.saId = ''
	console.log(val, '222')
	const arr = allDataOp.value.find((it: { operateId: string }) => {
		return it.operateId === val
	})
	console.log(arr, 'arr.data')
	if (arr && 'list' in arr) {
		customIdOptions.value = arr.list.map((it: { customId: any; customName: any }) => {
			return {
				value: it.customId,
				label: it.customName
			}
		})
		saleOptions.value = arr.list.map((it: { saId: any; saName: any }) => {
			return {
				value: it.saId,
				label: it.saName
			}
		})
		customerOptions.value = arr.list.map((it: { csId: any; csName: any }) => {
			return {
				value: it.csId,
				label: it.csName
			}
		})
	}
	console.log(arr, 'ssss')
}

const getDataList = async () => {
	const obj = {
		page: formData.currentPage,
		pageSize: formData.pageSize
	}
	console.log('obj', obj)
	dataListLoading.value = true
	const params = { ...obj, ...formData.queryForm }
	try {
		const res = await collectExpressApi(params)
		console.log('collectExpressApi', res)

		dataListLoading.value = false
		if (fetchWarning(res)) {
			return
		}
		formData.total = res.data.total
		dataList.value = res.data.records
		console.log('-----------', res.data.records)
	} catch (e) {
		dataListLoading.value = false
		myError(e)
	}
}
getDataList()

//查看
const viewDetailRefs = ref()
const checkHandle = async (val: object) => {
	const res = await collectSelectOne({ id: val.id })
	console.log('res', res)
	viewDetailRefs.value.init({ ...res.data })
}

const addHandle = () => {
	isUpdate.value = false;
	addOrUpdateRefs.value.init({type : "add"})
}
const addOrUpdateRefs = ref()
const addOrUpdateHandle = async (val: object) => {
	isUpdate.value = true;
	console.log('val', val)
	const res = await collectSelectOne({ id: val.id })
	console.log('val', addOrUpdateRefs.value, val)
	addOrUpdateRefs.value.init({ ...res.data , type : "update" })
}

const getDictionary = async (params: { dictType: string }) => {
	try {
		const res = await getDataDictionary(params)

		if (fetchWarning(res)) {
			return
		}
		let data = res.data || []

		data.forEach((item: { dictType: any; dictLabel: any; id: string | number; dictValue: string | number }) => {
			switch (item.dictType) {
				case 'pack_status':
					collectStateOptions.value.push({
						label: item.dictLabel,
						value: item.dictValue
					})
					break
				case 'cargoOptions':
					cargoOption.value.push({
						label: item.dictLabel,
						value: item.dictValue
					})
					break
				default:
					console.warn('未知字典类型:', item.dictType)
			}
		})

		console.log('collectStateOptions', collectStateOptions.value)
		console.log('getDictionary', data)
	} catch (error) {
		console.error('获取字典失败', error)
	}
}
const initDic = () => {
	getDictionary({
		dictType: 'pack_status'
	})
	collectStateOptions.value.unshift({
		label: '全部打包状态',
		value: '0'
	})
	getDictionary({
		dictType: 'cargoOptions'
	})
}
initDic()

const businessOptions = ref<ElSelectOption[]>([])
const countryList = ref<ElSelectOption[]>([])
const getLocation = async () => {
	try {
		const res = await getExpressRelatedData()
		if (res.code === 0) {
			const data = res.data
			businessOptions.value = data.businessTypeList
			countryList.value = data.countryList
			console.log('getExpressRelatedData', data)
			getDataList()
		} else {
			console.error('Error in response code:', res.message)
		}
	} catch (e) {
		console.log(e, '失败')
	}
}
getLocation()
const getData = e => {
	console.log('e', e)
}
// const filteredDataList = computed(() => {
// 	let filteredData = dataList.value

// 	const {
// 		collector,
// 		collectState,
// 		businessState,
// 		shState,
// 		goodsState,
// 		operateId,
// 		customId,
// 		saId,
// 		businessId,
// 		originCountry,
// 		ordersNo,
// 		collectNo,
// 		boxNo,
// 		expressNo,
// 		sendor,
// 		chargeState,
// 		destinationCountry,
// 		collectType
// 	} = formData.queryForm

// 	if (collector) {
// 		filteredData = filteredData.filter(item => item.collector.includes(collector))
// 	}

// 	if (businessState) {
// 		filteredData = filteredData.filter(item => item.businessState.includes(businessState))
// 	}
// 	if (customId) {
// 		filteredData = filteredData.filter(item => item.customId.includes(customId))
// 	}
// 	if (collectNo) {
// 		filteredData = filteredData.filter(item => item.collectNo.includes(collectNo))
// 	}
// 	return filteredData
// })
const UserQuery = reactive({
	page: 1,
	limit: 10
})



</script>

